<template>
  <div id="addB">
    <div class="top">
      <p>收费管理/账单管路/新建账单</p>
      <h3>新建账单</h3>
    </div>
    <div class="bottom">
      <p>基础信息</p>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="账单名称">
          <el-input disabled v-model="ruleForm.billName" />
        </el-form-item>
        <el-form-item label="账单编号">
          <el-input disabled v-model="ruleForm.code" />
        </el-form-item>
        <el-form-item label="收费项目">
          <el-select disabled v-model="ruleForm.service" placeholder="请选择">
            <el-option v-for="v in shoufei" :label="v.service" :value="v.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="费用单价">
          <el-input disabled v-model="ruleForm.price" />元
        </el-form-item>

        <el-form-item label="费用合计" prop="money">
          <el-input v-model="ruleForm.money" />元
        </el-form-item>
        <el-form-item label="滞纳金" prop="lateFee">
          <el-input v-model="ruleForm.lateFee" />元
        </el-form-item>
        <el-form-item label="缴纳状态" prop="status">
          <el-input v-model="ruleForm.status" />
        </el-form-item>

        <el-form-item label="备注" prop="remarks">
          <el-input v-model="ruleForm.remarks" type="textarea" />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="add()">确定生成账单</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import userStore from '../../store/index';
import { reactive, ref, onMounted } from 'vue';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import axios from 'axios';
import { useRouter } from 'vue-router';
const store = userStore();
const formSize = ref('default');
const ruleFormRef = ref<FormInstance>();
const size = ref<'' | 'large' | 'small'>('');
const value1 = ref('');
const com = ref([{ id: 0, accuracy: '' }]);
const danwei = ref([{ id: 0, unit: '' }]);
const shoufei = ref([{ id: 0, service: '' }]);
const way = ref([{ id: '', method: '' }]);
let ruleForm = reactive({
  billName: '',
  code: 0,
  service: '',
  price: 0,
  money: 0,
  lateFee: 0,
  status: 0,
  remarks: '',

  date: [],
  itemId: 0,
  formula: '',
  unitId: 0,
  accuracyId: 0,
});
const router = useRouter();

const compute = () => {
  axios({
    url: '/accuracy/queryAccuracyAll',
  }).then(({ data }) => {
    if (data.code == '0') {
      com.value = data.data;
    }
  });
};
const servi = () => {
  axios({
    url: '/item/queryItemAll',
  }).then(({ data }) => {
    if (data.code == '0') {
      shoufei.value = data.data;
    }
  });
};
const unit = () => {
  axios({
    url: '/unit/queryUnitAll',
  }).then(({ data }) => {
    if (data.code == '0') {
      danwei.value = data.data;
    }
  });
};
const rnd = (m: number, n: number) => Math.floor(Math.random() * (n - m) + m);
const add = () => {
  axios({
    url: '/bill/addNo',
  }).then(({ data }) => {
    axios({
      url: '/bill/add',
      method: 'post',
      data: {
        billName: ruleForm.billName,
        code: data.data,
        id: rnd(0, 100),
        money: rnd(0, 10000),
        itemId: ruleForm.itemId,
        endTime: ruleForm.date[1],
        payItemAddBillForms: [
          {
            unitId: ruleForm.unitId,
            price: ruleForm.price,
            formula: ruleForm.formula,
            lateFee: ruleForm.lateFee,
            accuracyId: ruleForm.accuracyId,
            payItemId: rnd(0, 100),
          },
        ],
        remarks: ruleForm.remarks,
        quantity: 0,
        startTime: ruleForm.date[0],
      },
    }).then(({ data }) => {
      if (data.code == '0') {
        ElMessage.success('添加成功');
        router.push({ path: '/home/billingM' });
      } else {
        ElMessage.error('添加失败');
      }
    });
  });
};
onMounted(() => {
  compute();
  servi();
  unit();
  axios({
    url: '/bill/queryByCode',
    params: {
      code: store.$state.code,
    },
  }).then(({ data }) => {
    if (data.code == '0') {
      ruleForm.billName = data.data[0].billName;
      ruleForm.code = data.data[0].code;
      ruleForm.service = data.data[0].service;
      ruleForm.price = data.data[0].price;
    }
  });
});
// const rules = reactive<FormRules>({
//   name: [
//     { required: true, message: "Please input Activity name", trigger: "blur" },
//     { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
//   ],
//   region: [
//     {
//       required: true,
//       message: "Please select Activity zone",
//       trigger: "change",
//     },
//   ],
//   count: [
//     {
//       required: true,
//       message: "Please select Activity count",
//       trigger: "change",
//     },
//   ],
//   date1: [
//     {
//       type: "date",
//       required: true,
//       message: "Please pick a date",
//       trigger: "change",
//     },
//   ],
//   date2: [
//     {
//       type: "date",
//       required: true,
//       message: "Please pick a time",
//       trigger: "change",
//     },
//   ],
//   type: [
//     {
//       type: "array",
//       required: true,
//       message: "Please select at least one activity type",
//       trigger: "change",
//     },
//   ],
//   resource: [
//     {
//       required: true,
//       message: "Please select activity resource",
//       trigger: "change",
//     },
//   ],
//   desc: [
//     { required: true, message: "Please input activity form", trigger: "blur" },
//   ],
// });
</script>
<style lang="less" scoped>
#addB {
  background: #f0f2f5;
  height: 100%;
  .top {
    width: 90%;
    height: 80px;
    margin: 20px auto;
    padding: 15px 0 5px 30px;
    margin: 10px auto;
    background: white;
  }
  .bottom {
    width: 90%;
    background: white;
    height: 100%;
    margin: 10px auto;
    padding: 15px 0 5px 30px;
    .el-form {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
    }
    .el-input,
    .el-textarea,
    .el-select,
    :deep(.demo-date-picker) {
      width: 300px;
    }
    .el-button {
      margin: 20px 0 0 700px;
    }
  }
}
</style>
